<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" :before-close="handleClose" append-to-body class="medium-common-dialog-size formula-dialog">
      <Title :title="'配置新字段'" font-size="16px" style="margin-bottom:20px;" />
      <Formula
        ref="formulaRefs"
        :look-input="true"
        :style="{maxHeight:`${maxHeight}px`}"
        @freshFormula="freshFormula"
        @inputFormula="inputFormula"/>
      <div class="btn-container">
        <el-button type="primary" class="ok-btn" size="small" @click="handelOk">确定</el-button>
        <!-- <el-button type="info" class="cancel-btn" size="small" @click="handleClose">取消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Formula from './formula';
import Title from '@/components/Title';
export default {
  components: { Formula, Title },
  props: {
    lookInput: { // 监听输入框
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formulaList: [],
      dialogFormVisible: false,
      maxHeight: '',
      combFieldsParams: {}
    };
  },
  methods: {
    handelOk() {
      // this.combFieldsParams = this.getParams();
      // this.$emit('setCombFields', this.combFieldsParams);
      this.handleClose();
    },
    openDialog() {
      const clientHeight = window.innerHeight;
      this.maxHeight = (clientHeight * 2) / 3;
      this.dialogFormVisible = true;
    },
    editOpenDialog(formulaList, isSave) {
      this.openDialog();
      this.$nextTick(() => {
        if (formulaList.length) {
          formulaList.forEach(i => {
            if (!i.options && i.formulaObj) {
              this.$set(i, 'options', i.formulaObj);
              this.$set(i, 'isFocus', false);
            }
          });
          formulaList[0].isFocus = true;
          this.$refs.formulaRefs.formulaList = formulaList;
        }
        if (isSave !== null) {
          this.$refs.formulaRefs.isSave = isSave;
        }
      });
    },
    handleClose() {
      this.combFieldsParams = this.getParams();
      this.$emit('setCombFields', this.combFieldsParams);
      this.dialogFormVisible = false;
    },
    inputFormula(formulaList) {
      this.formulaList = formulaList;
      if (this.lookInput) {
        this.$emit('inputFormula', formulaList);
      }
    },
    getParams() {
      let formulaList = JSON.parse(JSON.stringify(this.$refs.formulaRefs.formulaList)); // 字段配置
      formulaList = formulaList.filter(i => {
        return i.name !== '';
      });
      const isSave = this.$refs.formulaRefs.isSave;
      const combFields = this.handelfFormula(formulaList);
      return {
        isSave: isSave,
        combFields: combFields || []
      };
    },
    // 处理字段配置参数
    handelfFormula(formulaList) {
      let options = [];
      if (formulaList && formulaList.length) {
        options = JSON.parse(JSON.stringify(formulaList)).map(i => {
          let formulaOpt = '';
          let variate = '';
          const variateIdList = [];
          if (i.options && i.options.length > 0) {
            // formulaOpt = i.options.map(opt => opt.name).join('');
            formulaOpt = i.options.map(opt => {
              if (opt.isVariate) {
                return `"${opt.name}"`;
              }
              return opt.name;
            }).join('');
            variate = i.options.map(opt => {
              if (opt.isVariate) {
                variateIdList.push(opt.id);
                return `"${opt.name}"`;
              } else {
                return '';
              }
            }).filter(j => j !== '').join(',');
          }
          return {
            name: i.name,
            formula: formulaOpt,
            formulaObj: i.options,
            variate: variate,
            variateIdList: variateIdList,
            options: i.options
          };
        });
      }
      return options;
    },
    deleteCombFIelds(tag, index) {
      this.$refs.formulaRefs.deleteItem(index);
    },
    freshFormula() {
      this.combFieldsParams = this.getParams();
      this.$emit('setCombFields', this.combFieldsParams);
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  .ok-btn {
    width: 120px;
    height: 32px;
    border-radius: 4px;
  }
  .cancel-btn {
    width: 80px;
    height: 32px;
    background: #EFF3FB;
    border-radius: 4px;
    border: none;
    color: #406EFF;
  }
}
</style>
<style lang="scss">
.formula-dialog {
  .el-dialog {
    width: 800px !important;
  }
}
</style>
